<template>
    <div class="page page-stadium-order has-headbar">
    	<head-bar title="场馆预定详情" :prevRoute="{name: 'user-orders'}" />
			<div class="orderOut">
				<van-loading class="loading" v-if="loading"></van-loading>
				<div class="orderTop">
					<span class="time">{{orderData.createtime | formateDate}}</span>
					<!-- 1是刚预定的 2是已到店 3算是订单完成了 -->
					 <van-button v-if="orderData.status === 1"  class="state" round size="mini">未到店</van-button>
					<van-button v-if="orderData.status === 2 && orderData.isComment === 0" class="state comment" @click="commentEvent" round size="mini">待评价</van-button>
					<van-button v-if="orderData.status === 2 && orderData.isComment === 1" class="state" disabled round size="mini">已评价</van-button>
					<van-button v-if="orderData.status === 3" class="state no" round size="mini">已完成</van-button>
				</div>
				<ul class="orderList">
					<li>
						<label>订单编号</label>
						<span>{{orderData.ordernumber}}</span>
					</li>
					<li>
						<label>场馆名称</label>
						<span>{{orderData.venueName}}</span>
					</li>
					<li>
						<label>联系方式</label>
						<span><a :href="`tel:${phone}`">{{phone}}</a></span>
					</li>
					<li>
						<label>场馆地址</label>
						<span>{{orderData.venueAddress}}</span>
					</li>
					<li>
						<label>运动项目</label>
						<span>{{orderData.typeName}}</span>
					</li>
					<li>
						<label>预定时间</label>
						<span>{{orderData.startTimeFormate}} {{orderData.orderList}}</span>
					</li>
					<li>
						<label>订单金额</label>
						<span>￥{{orderData.totalprice}}</span>
					</li>
				</ul>
			</div>
			<div class="cancle-box" v-if="orderData.status == 1">
				<van-button class="submit-btn" type="warning" size="large" @click="submitEvent" :disabled="submitDisabled">取消预约</van-button>
			</div>
			<div class="codeImg" v-if="orderData.status == 1">
				<img :src="orderData.qrcodeimage"/>
				<p>请到场馆后出示此二维码</p>
			</div>
    </div>
</template>

<script>
import { API_ORDER_DETAIL, API_ORDER_CLOSE, API_ORDER_ISREVERSE } from '@/service/veneue'
import dayjs from 'dayjs'
import { wxjsdkMixin } from '@/components/mixins'
export default {
  mixins: [wxjsdkMixin],
  name: 'stadium-order',
  data () {
	  return {
		  orderData: {
        createtime: '',
        starttime: '',
        endtime: ''
      },
      loading: false,
      phone: '',
      submitDisabled: false
	  }
  },
  computed: {
	  orderId () {
		  return this.$route.params.id
	  }
  },
  filters: {
    formateDate (time) {
      return time ? dayjs(dayjs.unix(time)).format('YYYY-M-D HH:mm') : ''
    },
    formateDay (time) {
      // console.log(time)
      return time ? dayjs(time).format('YYYY-MM-DD') : ''
    }
  },
  mounted () {
    this.wechatHideMenu()
    this.requestData()
  },
  methods: {
	  requestData () {
      this.loading = true
		  API_ORDER_DETAIL(this.orderId).then(resData => {
        this.orderData = resData.info
        this.phone = resData.phone
		  }).finally(() => {
        this.loading = false
      })
    },
    commentEvent () {
      this.$router.push({ name: 'stadium-comment', query: { orderId: this.orderData.orderid, sportsVenueId: this.orderData.venueid } })
    },
    submitEvent () {
      API_ORDER_ISREVERSE(this.orderId).then((res) => {
        // console.log(res)
        let data = res.data
        switch (data) {
          case 0:
            this.requestCancle()
            break
          case 1:
            this.$dialog.alert({
              title: '取消提示',
              message: '当前时间未到可取消时间，强行取消会扣信誉分，信誉分不足将会无法预订'
            }).then(() => {
              this.requestCancle()
            })
            break
          case 2:
            this.$dialog.alert({
              title: '无法取消',
              message: '已过预定的时间，如要取消请联系场馆工作人员'
            })
            break

          default:
            break
        }
      })
    },
    requestCancle () {
      this.$dialog.confirm({
        title: '取消预约',
        message: '确认要取消预约吗？',
        cancelButtonText: '返回'
      }).then(() => {
        // on confirm
        this.submitDisabled = true
        API_ORDER_CLOSE({ orderId: this.orderId }).then(() => {
          this.$toast('取消成功')
          this.$router.replace({ name: 'user-orders', query: { type: 0 } })
        }).catch(() => {
          this.submitDisabled = false
        })
      }).catch(() => {
        // on cancel
        console.log('cancel')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.page-stadium-order{
	width:95%;
	margin: 0 auto;
	@import "../../assets/styles/stadium.less";
	.orderOut{
		box-shadow: 0px 0px 17.64px 0.36px rgba(44, 44, 44, 0.09);
	  border-radius: 5px;
	  margin: 10px 0;
		padding: 10px;
		position: relative;
		.loading {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	  .orderTop{
	  	display:flex;
	  	padding-bottom:5px;
	  	.time{flex:1;line-height:25px;}
		.state{
			background:#8ea1f6;
			color:#fff;
			border-radius:10px;
			padding:0 3px;
			font-size:1em;
			border: none;
			&.no{background:#c4c4c4;}
			&.comment {
				background: #FEA54B;
			}
		}
		  border-bottom:1px solid #EAEAEA
	  }
	  .orderList{
	  	li{
	  		display:flex;
	  		padding:10px 0;
	  		span{
	  			flex:3;
	  			text-align:right;
	  		}
	  	}
	  }
	}
	.cancle-box{
		margin-top: 15px;
		margin-bottom: 15px;
		.submit-btn{
			// background: @buttonColorPrimary;
			// color: #fff;
		}
	}
	.codeImg{
		text-align:center;
		img {
			width: 150px;
		}
	}
}
</style>
